<template>
  <div class="comment">
    <van-overlay :show="overlayVisable" z-index="2">
      <div class="wrapper">
        <van-loading size="24px">
          <span id="loading">数据加载中...</span>
        </van-loading>
      </div>
    </van-overlay>
    <div class="rating">
      <div id="box01">
        <div id="box01_01">
          <p style="font-size: 24px;color:rgb(255, 206, 127);">{{(info.serviceScore*1.0).toFixed(1)}}</p>
          <p style="font-size: 12px;">综合评分</p>
          <p style="font-size: 12px;color: grey;letter-spacing:1px">高于周边商家度50%</p>
        </div>
      </div>
      <div id="box02">
        <div>
          <!-- 服务态度 -->
          <p>
            <van-rate v-model="info.serviceAttitude" allow-half :size="13" readonly color="#ffd21e" void-icon="star"
              void-color="#eee" />
            <span style="margin-left: 5px;font-size: 12px;">服务态度</span>
            <span
              style="margin-left: 5px;font-size: 12px;color:rgb(255, 206, 127);font-weight: 700;">{{info.serviceAttitude}}</span>
          </p>
          <!-- 商品评分 -->
          <p>
            <van-rate v-model="info.shopMark" allow-half :size="13" readonly color="#ffd21e" void-icon="star"
              void-color="#eee" />
            <span style="margin-left: 5px;font-size: 12px;">商品评分</span>
            <span
              style="margin-left: 5px;font-size: 12px;color:rgb(255, 206, 127);font-weight: 700;">{{info.shopMark}}</span>
          </p>
        </div>
        <!-- 送出时间 -->
        <p style="margin-top: 5px;margin-left: -10px;">
          <span style="font-size: 13px;">送出时间 </span>
          <span style="color: grey;font-size: 12px;">{{info.deliveryTime}}</span>
        </p>
      </div>
    </div>

    <div style="height: 5px;"></div>
    <van-empty v-if="allRemakeList.length == 0" description="当前暂无评论" />
    <van-sticky v-if="allRemakeList.length != 0" :offset-top="50">
      <!-- 查询条件 -->
      <van-col span="1"></van-col>
      <van-col span="3">
        <van-tag @click="isActived = 1" :color="isActived==1 ? 'gold' : 'gray'">全部</van-tag>
      </van-col>
      <van-col span="3">
        <van-tag @click="isActived = 2" :color="isActived==2 ? 'gold' : 'gray'">好评</van-tag>
      </van-col>
      <van-col span="3">
        <van-tag @click="isActived = 3" :color="isActived==3 ? 'gold' : 'gray'">中评</van-tag>
      </van-col>
      <van-col span="3">
        <van-tag @click="isActived = 4" :color="isActived==4 ? 'gold' : 'gray'">差评</van-tag>
      </van-col>
    </van-sticky>
    <!-- 具体评论 -->
    <div id="box03">
      <div style="height:5px"></div>
      <!-- 评论描述 -->
      <div class="remark" v-for="(remake,index) in remakeList" :key="index">
        <ul>
          <li>
            <van-cell :value="remake.goodOrBad">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <van-image style="float: left;" round width="10rem" height="10rem" :src="remake.icon" />
                <div style="float: left;margin-left: 10px;">
                  <p style="font-size: 14px;font-weight: 700;letter-spacing: 1px;">{{remake.username}}</p>
                  <p style="font-size: 1px;margin-top:-6px ;color:gray">{{remake.createTime}}</p>
                </div>
              </template>
              <template #right-icon>
                <van-icon v-if="remake.goodOrBad == '好评' " name="good-job" size="20" color="gold" />
                <van-icon v-if="remake.goodOrBad == '中评'" name="good-job" size="20" />
                <van-icon v-if="remake.goodOrBad == '差评'"
                  name="https://lzc-bucket-2022-01-21.oss-cn-beijing.aliyuncs.com/schoolOrder/app/2022062425415.png"
                  size="20" color="gold" />
              </template>
            </van-cell>
            <div style="margin-left: 15px;">
              <p>
                <van-rate v-model="remake.serviceScore" allow-half :size="13" readonly color="#ffd21e" void-icon="star"
                  void-color="#eee" />
                <span style="margin-left: 5px;font-size: 12px;">服务态度</span>
                <span
                  style="margin-left: 5px;font-size: 12px;color:rgb(255, 206, 127);font-weight: 700;">{{remake.serviceScore}}</span>

                <van-rate style="margin-left: 40px;" v-model="remake.foodScore" allow-half :size="13" readonly
                  color="#ffd21e" void-icon="star" void-color="#eee" />
                <span style="margin-left: 5px;font-size: 12px;">商品评分</span>
                <span
                  style="margin-left: 5px;font-size: 12px;color:rgb(255, 206, 127);font-weight: 700;">{{remake.foodScore}}</span>
              </p>
            </div>
            <div id="remarkContent" style="padding: 5px 15px; color: grey;">
              <p style="font-size: 13px;line-height:1.5em">{{remake.remake}}</p>
            </div>
            <div style="display: flex;">
              <van-image style="margin-left: 25px;" v-for="(picture,index) in remake.picture.split(',')" :key="index"
                width="75" height="75" :src="picture" />
            </div>
            <van-divider />
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  import request from '@/utils/request';
  export default {
    data() {
      return {
        serviceValue: 3.5,

        foodValue: 1,
        isActived: 1,
        allRemakeList: [],
        condition: [
          "", "全部", "好评", "中评", "差评"
        ],
        overlayVisable:false
      }
    },
    computed: {
      ...mapState("shopInfo", ['info']),
      ...mapState('customer', ['customerInfo']),
      remakeList() {
        var curSelected = this.condition[this.isActived]
        if (this.isActived == 1)
          return this.allRemakeList
        else
          return this.allRemakeList.filter(item => item.goodOrBad == curSelected)
      }
    },
    methods: {
      ...mapActions('customer', ['getcustomerInfo']),
      findShopRemake() {
        
        request.get('/schoolOrder/app/shop/findShopRemakeById', {
          params: {
            id: this.info.id
          }
        }).then(res => {
          this.allRemakeList = res.data.data;
          this.overlayVisable = false;
          //  console.log(this.allRemakeList)
          // this.pictureList = this.allRemakeList[0].picture.split(',');
          // console.log(this.pictureList)
        })
      }
    },
    mounted() {
      this.overlayVisable = true;
      this.getcustomerInfo();
      setTimeout(() => {

        this.findShopRemake()
      }, 1000);

    },

  }
</script>

<style scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  #loading {
    color: grey;
  }

  .comment {
    padding-top: 5px;
    background-color: rgba(200, 200, 200, 0.066);
    width: 100%;
    height: 410px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .rating {
    width: 100%;
    height: 105px;
    box-sizing: border-box;
    background-color: white;
  }

  #box01 {
    float: left;
    /* background-color: aquamarine; */
    width: 50%;
    height: 105px;
    box-sizing: border-box;
    padding-top: 12px;

  }

  #box01 p {
    text-align: center;
    margin-top: 5px;
  }

  #box01_01 {
    width: 100%;
    height: 80px;
    /* background-color: red; */
    margin: auto;
    padding-top: 7%;
    border-right: solid 1px rgba(200, 200, 200, 0.814);
    box-sizing: border-box;

  }

  #box02 {
    float: left;
    /* background-color: lightcoral; */
    width: 50%;
    height: 105px;
    box-sizing: border-box;
    padding-top: 10%;
    padding-left: 5%;
  }



  #box03 {
    /* background-color: skyblue; */
    width: 100%;
    margin-top: 0px;
    height: 290px;
    box-sizing: border-box;
    /* background-color: red; */
    padding-top: 5px;
    overflow: scroll;
  }

  .remark {
    width: 100%;
    /* height: 180px; */
    /* background-color: red; */
    background-color: white;
    box-sizing: border-box;

  }
</style>